<script setup>
import { ref } from 'vue';
import FoodInput from './components/FoodInput.vue';
import IngredientList from './components/IngredientList.vue';
import ShoppingList from './components/ShoppingList.vue';
import { getIngredientsByDishName, fuzzyMatchDishName } from './data/recipes.js';
import { analyzeIngredientsWithQwen } from './utils/qwenAnalyzer.js';

// 状态管理
const ingredients = ref([]);
const shoppingList = ref([]);
const analyzed = ref(true);

// 分析菜品函数
const analyzeFood = async (userInput) => {
  // 重置状态
  ingredients.value = [];
  analyzed.value = false;
  
  // 1. 先尝试在预设数据库中查找
  let foundIngredients = getIngredientsByDishName(userInput);
  
  // 2. 如果没找到，尝试模糊匹配
  if (!foundIngredients) {
    const matchedDish = fuzzyMatchDishName(userInput);
    if (matchedDish) {
      foundIngredients = getIngredientsByDishName(matchedDish);
    }
  }
  
  // 3. 如果还是没找到，调用千问API
  if (!foundIngredients) {
    try {
      foundIngredients = await analyzeIngredientsWithQwen(userInput);
    } catch (error) {
      console.error("调用千问API失败:", error);
    }
  }
  
  console.log(foundIngredients);
  // 4. 设置结果
  if (foundIngredients) {
    ingredients.value = foundIngredients;
  }
  
  analyzed.value = true;
};

// 添加到购物清单
const addToShoppingList = (newIngredients) => {
  // 避免重复添加
  const uniqueIngredients = newIngredients.filter(newItem => 
    !shoppingList.value.some(existingItem => existingItem.name === newItem.name)
  );
  
  // 添加到购物清单
  shoppingList.value = [...shoppingList.value, ...uniqueIngredients.map(item => ({
    ...item,
    purchased: false
  }))];
};

// 更新购物清单
const updateShoppingList = (newList) => {
  shoppingList.value = newList;
};
</script>

<template>
  <div class="app">
    <header class="app-header">
      <h1>懒人指南 - 今晚想吃什么？</h1>
    </header>
    
    <main class="app-main">
      <FoodInput :on-analyze="analyzeFood" />
      
      <div class="results-section">
        <div v-show="!analyzed">loading...</div>
        <IngredientList 
          :ingredients="ingredients" 
          :analyzed="analyzed"
          @add-to-shopping-list="addToShoppingList"
        />
        
        <ShoppingList 
          :items="shoppingList"
          @update-items="updateShoppingList"
        />
      </div>
    </main>
    
    <footer class="app-footer">
      <p>懒人指南 - 让你轻松决定今晚吃什么</p>
    </footer>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.app-header {
  background-color: #42b883;
  color: white;
  padding: 20px;
  text-align: center;
}

.app-header h1 {
  margin: 0;
  font-size: 24px;
}

.app-main {
  flex: 1;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.results-section {
  margin-top: 30px;
}

.app-footer {
  background-color: #f8f9fa;
  padding: 20px;
  text-align: center;
  color: #6c757d;
  font-size: 14px;
}

@media (max-width: 600px) {
  .app-main {
    padding: 10px;
  }
  
  .app-header h1 {
    font-size: 20px;
  }
}
</style>
